<wicket:panel>
	<div wicket:id="content" class="setup-2fa text-center"></div>
	<wicket:fragment wicket:id="pendingVerifyFrag">
		<form wicket:id="form">
			<div wicket:id="enforceNotice" class="alert alert-light-warning"><wicket:t>Two-factor authentication is enforced 
			for your account to enhance security. Please follow below procedure to set it up</wicket:t></div>
			<div class="text-secondary font-size-lg font-weight-boldest mb-2">
			<wicket:t>Scan below QR code with your TOTP authenticators</wicket:t>
			</div>
			<div><wicket:t>These authenticators normally run 
			on your mobile phone, some examples are Google Authenticator, Microsoft Authenticator, Authy, 1Password etc.</wicket:t></div>
		
			<div class="d-flex justify-content-center my-3">
				<img wicket:id="QRCode">
			</div>
			
			<div class="text-secondary font-size-lg font-weight-boldest mb-2">
			<wicket:t>Or manually enter the secret key below in your authenticator app</wicket:t>
			</div>
			<div class="d-flex justify-content-center mb-3">
				<div class="text-monospace font-weight-bold border rounded p-2">
					<span wicket:id="secretKey"></span>
				</div>
			</div>
			
			<div class="text-secondary font-size-lg font-weight-boldest mb-2">
			<wicket:t>Then enter the passcode shown in the TOTP authenticator to verify</wicket:t>
			</div>
			<input wicket:id="passcode" class="form-control mt-2" t:placeholder="6-digits passcode">
			<div wicket:id="feedback" class="mb-n3 mt-3"></div>
			<div class="mt-5">
				<input wicket:id="verify" type="submit" t:value="Verify" class="dirty-aware btn btn-primary">
			</div>
		</form>
	</wicket:fragment>
	<wicket:fragment wicket:id="verifiedFrag">
		<h4 class="text-success mb-4"><wicket:svg href="tick-circle" class="icon icon-lg"/> <wicket:t>Two-factor authentication is now configured</wicket:t></h4> 
		
		<div class="mb-3">
		<b class="text-danger"><wicket:t>IMPORTANT:</wicket:t></b> 
		<wicket:t>
			Please <a wicket:id="download" class="font-weight-bolder">download</a> 
			recovery codes below and keep 
			them secret. These codes can be used to provide one-time access to your account in case you 
			can not access the authentication application. They will <b>NOT</b> be displayed again 
		</wicket:t>
		</div>
		<div>
			<div wicket:id="recoveryCodes" class="d-flex justify-content-center text-monospace font-size-h5 font-weight-bold"></div>		
		</div>
		<div class="mt-5">
			<a wicket:id="ok" class="btn btn-primary"><wicket:t>Ok</wicket:t></a>
		</div>
	</wicket:fragment>
</wicket:panel>